<template>
  <view class="tp-art-item">
    <view class="main-img" v-if="mainPic" :style="imgStyle" @click="handleClick">
      <view v-if="cityList && cityList.length > 0" class="city-wrapper">
        <text class="city-name">{{cities}}</text>
      </view>
    </view>
    <view class="content" @click="handleClick">
      <view class="art-item-title"><text>{{title}}</text></view>
      <view class="summary">{{summary}}</view>
      <view class="tags" v-if="tags">
        <ai-tag class="tag-item" v-for="(tag, tidx) in tags" color="primary"
          :text="tag" :key="'tag-' + tidx"></ai-tag>
      </view>
    </view>

    <view class="opt-wrapper">
      <view class="opt-box">
        <view class="opt">
          <view class="opt-btn">
            <ai-icon-button :icon-color="collected ? 'var(--brand-2)': ''" :icon="collected ? 'icon-fill-collect':'icon-collect'" :size="18"  @click="handleCollect"></ai-icon-button>
          </view>
          <text class="opt-text">{{collectCnt}}</text>
        </view>
        <view class="opt">
          <view class="opt-btn">
            <ai-icon-button :icon-color="agreed ? 'var(--brand-2)': ''" :icon="agreed ? 'icon-fill-agree':'icon-agree'" :size="18" @click="handleAgree"></ai-icon-button>
          </view>
          <text class="opt-text">{{agreeCnt}}</text>
        </view>
      </view>
      <view class="user" v-if="user">
        <text class="ymd">{{createYmd}}</text>
        <ai-avatar :src="user.avatar" shape="circle" size="sm"></ai-avatar>
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * 规划列表项
   * @description 通用规划列表项
   * @property {String} planId 规划ID
   * @property {Object} user 规划分享的用户
   *   @field {String} name 用户名称
   *   @field {String} avatar 用户头像
   * @property {String} title 规划标题
   * @property {String} main-pic 对应的主图
   * @property {String} summary 规划摘要
   * @property {String} createYmd 消息创建时间
   * @property {Array} tags 规划对应的标签列表
   * @property {Number} collect-cnt 收藏数
   * @property {Number} agree-cnt 点赞数
   * @property {boolean} collected 登录用户是否已收藏
   * @property {boolean} agreed 登录用户是否已点赞
   */
  export default {
    name: "tp-art-item",
    emits: ["collect", "agree", "select"],
    props: {
      planId: String,
      user: Object,
      title: String,
      mainPic: String,
      summary: String,
      createYmd: String,
      cityList: {
        type: Array,
        default: []
      },
      tags: {
        type: Array,
        default: []
      },
      collectCnt: {
        type: [Number, String],
        default: 0
      },
      agreeCnt: {
        type: [Number, String],
        default: 0
      },
      collected: {
        type: Boolean,
        default: false
      },
      agreed: {
        type: Boolean,
        default: false
      },
      index: Number,
    },
    data() {
      return {

      };
    },
    computed: {
      imgStyle : {
        get: function() {
          let img = this.mainPic
          return `background-image:url(${img});background-size:100% auto;background-position:0 15%;`
        }
      },
      cities() {
        if (!this.cityList) {
          return ""
        }
        return this.cityList.join(",")
      }
    },
    methods: {
      handleCollect() {
        let data = {index: this.index, planId: this.planId}
        this.$emit('collect', data)
      },
      handleAgree() {
        let data = {index: this.index, planId: this.planId}
        this.$emit('agree', data)
      },
      handleClick() {
        this.$emit('select', this.planId)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .tp-art-item {
    position: relative;
    border-radius: $border-radius-md;
    box-shadow: var(--shadow-1);
    background: $card-bg;
    
    .main-img {
      width: 100%;
      height: 0;
      padding-bottom: 61.8%;
      border-radius: $border-radius-md $border-radius-md 0 0;
      position: relative;
      .city-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.15));
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .city-name {
          font-size: $font-size-lg;
          color: var(--white);
          margin-right: $gutter;
        }
      }
    }
    
    .content {
      padding: $gutter;
      max-height: 138px;
      flex-grow: 1;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .art-item-title {
        color: var(--gray-1);
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        padding-bottom: $gutter * 0.5;
      }
      
      .summary {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: $font-size-md;
        color: var(--gray-2);
        line-height: 1.5;
      }
      .tags {
        margin-top: 4px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        
        .tag-item {
          margin-right: 4px;
        }
      }
    }
    
    .opt-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 $gutter $gutter;
    }
    .opt-box {
      display: flex;
      align-items: flex-end;
      .opt {
        display: flex;
        align-items: center;
        margin-right: $gutter;
        
        .opt-btn {
          margin-right: 4px;
          &.fill {
            color: var(--brand-1);
          }
        }
        .opt-text {
          color: var(--gray-3);
          font-size: $font-size-sm;
          line-height: 24px;
        }
      }
    }
    .user {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      .ymd {
        font-size: $font-size-sm;
        padding-right: $gutter * 0.5;
      }
    }
    
  }
</style>